<template>
  <div class="largeScreen">
    <div class="headerBox">
      <div class="frc pt30 pr20">
        <div class="flc tabsBox">
          <div class="tabsItemBg cur f14 fcc flex-1" :class="tabIdx == idx ? 'selectTabsItemBg' : ''"
            v-for="(item, idx) in tablist" @click="tabsFun(idx)">
            <div>{{ item.name }}</div>
            <div class="down_line"></div>
          </div>
        </div>
        <div class="fcc">
          <div class="flc ml20">
            <div class="cblue">{{ currentDate }}</div>
            <div class="cwhite ml20">{{ currentTime }}</div>
            <div class="cblue"></div>
          </div>
        </div>
      </div>
        <!-- 添加光束元素 -->
      <div class="light-beam"></div>
    </div>
    <div class="fcbc chartBox p20">
      <div class="fcbc fv h1 flex-2 leftBox">
        <div class="flex-1 flc fv w1">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">总装机容量</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 mt10">
              <pieChart :seriesData="zjrlD" :className="'chart'" :height="'100%'" :width="'100%'" :unit="'kw'"
                :dataName="'装机容量'" :totalValue="totalValue"></pieChart>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1">
          <div class="chartTile f16 flc">
<!--            <div class="title-text pl20">实时发电功率（<span>{{ zglNum }}</span>）</div>-->
            <div class="title-text pl20">实时发电功率</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 mt10">
              <continuousChart :zglD="zglD" dataName="总功率" unit="万kw"></continuousChart>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1 rel">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">发电功率趋势</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="tabSelect pt8">
            <el-radio-group v-model="tabPosition" @change="handleTimeChange">
              <el-radio-button label="nian">年</el-radio-button>
              <el-radio-button label="yue">月</el-radio-button>
              <el-radio-button label="ri">日</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 pt10">
              <lineChartQs :fdglX="fdglX" :fdglD="fdglD" :key="chartKey" dataName="功率"
                unit="万kw"></lineChartQs>
            </div>
          </div>
        </div>
      </div>
      <div class="fcbc fv h1 flex-3 pl20 pr20 concentBox">
        <div class="contentTitle fcc w1">
          <div class="fcc conTitleBtn">
            <div class="distributionSelLeft cwhite flex-1 fcc cur" :class="fenbuIdx == 1 ? 'distributionBlue' : ''"
              @click="fenbu(1)">电场分布</div>
            <div class="distributionSel cwhite flex-1 ml10 fcc cur" :class="fenbuIdx == 2 ? 'distributionRight' : ''"
              @click="fenbu(2)">风机分布</div>
          </div>
        </div>
        <div class="flex-3 fcc w1">
          <div class="fcbc w1 h1" :class="fenbuIdx == 1 ? 'cockpitCon' : 'cockpitConFjfb'">
            <!-- 电场分布 - 默认显示 -->
            <div class="markPoint" v-show="fenbuIdx == 1">
              <div class="fcc fv cur pointAll" v-for="(item, idx) in farmList" :key="'field-' + idx"
                @click="goToDetail(item)" :style="`top:36%;left:${siteFun(idx, 'l')}px`">
                <div class="pointBox1"></div>
                <div class="cwhite mt10" style="font-size: 10px;">{{ item.name }}</div>
              </div>
            </div>

            <!-- 风机分布 - 默认隐藏，点击风机分布时显示 -->
            <div class="markPoint" v-show="fenbuIdx == 2">
              <div class="fcc fv cur pointAll" v-for="(item, idx) in 1" :key="'fan-' + idx" @click="goToDetail1()"
                :style="`top:36%;left:${siteFun(idx, 'l')}px`">
                <div :class="`jcpointBox${idx < 4 ? idx % 3 : ''}`"></div>
                <div class="cwhite mt10" style="font-size: 10px;margin-top: -10px;">全部风机</div>
              </div>


              <fjTableAll :dialogVisible.sync="fjAll"></fjTableAll>
            </div>
          </div>
        </div>
        <div class="flex-1 flc fv w1 gjjcBox">
          <div class="chartTile f16 flc" style="height: 50px;">
            <div class="title-text pl20">设备告警监测</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <tableList :dialogVisible.sync="dialogVisible1" :gjzt="gjzt"></tableList>
          <tableList2 :dialogVisible.sync="dialogVisible2" :gjzt="gjzt"></tableList2>
          <div class="fcbc w1 mt20 h1">
            <div class="gjjcBg flex-2 mr20 fcc fw h1 cur" @click="openTable1('告警信息')">
              <div>
                <el-image style="width: 66px; height: 66px" :src="require(`@/assets/images/icon/icon-rt-0.png`)"
                  fit="fill"></el-image>
              </div>
              <div class="ml10">
                <div class="cgray fcc f12 mb10">告警信息</div>
                <div class="cwhite f20 fcc">{{ sbgj.gjxx }}</div>
              </div>
            </div>
            <div class="gjjcBg flex-1 mr20 fcc h1 cur" @click="openTable1('运行中')">
              <div>
                <div>
                  <el-image style="width: 66px; height: 66px" :src="require(`@/assets/images/icon/icon-rt-1.png`)"
                    fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mt10 mb10">运行中</div>
                  <div class="cwhite f20 fcc">{{ sbgj.yxz }}</div>
                </div>
              </div>
            </div>
            <div class="gjjcBg flex-1 mr20 fcc h1 cur" @click="openTable1('离线')">
              <div>
                <div>
                  <el-image style="width: 66px; height: 66px" :src="require(`@/assets/images/icon/icon-rt-2.png`)"
                    fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mt10 mb10">离线</div>
                  <div class="cwhite f20 fcc">{{ sbgj.lx }}</div>
                </div>
              </div>
            </div>
            <div class="gjjcBg flex-1 mr20 fcc h1 cur" @click="openTable1('检修')">
              <div>
                <div>
                  <el-image style="width: 66px; height: 66px" :src="require(`@/assets/images/icon/icon-rt-3.png`)"
                    fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mt10 mb10">检修</div>
                  <div class="cwhite f20 fcc">{{ sbgj.jx }}</div>
                </div>
              </div>
            </div>
            <div class="gjjcBg flex-1 fcc h1 cur" @click="openTable1('故障')">
              <div>
                <div>
                  <el-image style="width: 66px; height: 66px" :src="require(`@/assets/images/icon/icon-rt-4.png`)"
                    fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mt10 mb10">故障</div>
                  <div class="cwhite f20 fcc">{{ sbgj.gz }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fcbc fv h1 flex-2 righBox">
        <div class="mt20 flc fv w1 rel">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">发电量</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="leftThreeSelect pt5">
            <el-select v-model="leftThreeValue" placeholder="请选择" :popper-append-to-body="false" @change="handleSelectChange">
              <el-option v-for="item in leftThreeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="fcbc w1 p10">
            <div class="flc">
              <div class="icon-electricity fcb" style="position: relative;">
                <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan4 rotating-circle"
                    style="height: 50px;width: 52px;min-height: 50px;min-width: 52px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/8.png`)"
                    fit="fill" class="quan8"
                    style="height: 52px;width: 50px;min-height: 52px;min-width: 50px;">
                  </el-image>
                <div class="ml20 wzz">日</div>
              </div>
              <div class="ml5">
                <div class="cgray">当日</div>
                <div class="flc mt5">
                  <div class="cwhite f20">{{ electricityData.dr }}</div>
                  <div class="cgray ml5">kwh</div>
                </div>
              </div>
            </div>
            <div class="flc">
              <div class="icon-electricity fcb" style="position: relative;">
                <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan4 rotating-circle"
                    style="height: 50px;width: 52px;min-height: 50px;min-width: 52px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/8.png`)"
                    fit="fill" class="quan8"
                    style="height: 52px;width: 50px;min-height: 52px;min-width: 50px;">
                  </el-image>
                <div class="ml20 wzz">月</div>
              </div>
              <div class="ml5">
                <div class="cgray">当月</div>
                <div class="flc mt5">
                  <div class="cwhite f20">{{ electricityData.dy }}</div>
                  <div class="cgray ml5">kwh</div>
                </div>
              </div>
            </div>
            <div class="flc">
              <div class="icon-electricity fcb" style="position: relative;">
                <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan4 rotating-circle"
                    style="height: 50px;width: 52px;min-height: 50px;min-width: 52px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/8.png`)"
                    fit="fill" class="quan8"
                    style="height: 52px;width: 50px;min-height: 52px;min-width: 50px;">
                  </el-image>
                <div class="ml20 wzz">年</div>
              </div>
              <div class="ml5">
                <div class="cgray">当年</div>
                <div class="flc mt5">
                  <div class="cwhite f20">{{ electricityData.dn }}</div>
                  <div class="cgray ml5">kwh</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">发电等效时</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 mt10">
              <barChartThree :fdzxsX="fdzxsX" :fdzxsD1="fdzxsD1" :fdzxsD="fdzxsD" dataName="功率"
                unit="万kwh、h"></barChartThree>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1 rel">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">发电量趋势</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="tabSelect pt8">
            <el-radio-group v-model="tabPosition1" @change="handleTimeChange1">
              <el-radio-button label="nian">年</el-radio-button>
              <el-radio-button label="yue">月</el-radio-button>
              <el-radio-button label="ri">日</el-radio-button>
            </el-radio-group>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 pt10">
              <lineChart :fdlqsX="fdlqsX" :fdlqsD="fdlqsD" :key="chartKey1"  dataName="发电量"
                unit="万kwh"></lineChart>
            </div>
          </div>
        </div>
        <div class="flex-1 flc fv w1">
          <div class="chartTile f16 flc">
            <div class="title-text pl20">运行排名</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <tableListRanking :dialogVisible.sync="dialogVisible"></tableListRanking>
          <tableListRanking1 :dialogVisible.sync="dialogVisibleA"></tableListRanking1>
          <tableListRanking3 :dialogVisible.sync="dialogVisibleB"></tableListRanking3>
          <tableListRanking2 :dialogVisible.sync="dialogVisibleC"></tableListRanking2>
          <tableListRanking4 :dialogVisible.sync="dialogVisibleD"></tableListRanking4>
          <div class="w1">
            <div class="fcbc w1 mt20">
              <div class="rankingBg flex-1 fcc cur"
                :class="{ rankingBg: activeIndex === 0, rankingBgBlue: activeIndex !== 0 }" @click="handleClick(0)"  @mouseover="hoverIndex = 0"
                @mouseout="hoverIndex = null">
                <div>
                  <el-image style="width: 30px; height: 30px" :src="require(`@/assets/images/icon/rankingBlue.png`)"
                    fit="fill"></el-image>
                </div>
                <div class="cwhite">等效排名</div>
              </div>
              <div class="rankingBg flex-1 ml10 fcc cur"
                :class="{ rankingBg: activeIndex === 1, rankingBgBlue: activeIndex !== 1 }" @click="handleClick(1)"  @mouseover="hoverIndex = 1"
                @mouseout="hoverIndex = null">
                <div class="flex-1 fcc cur">
                  <div>
                    <el-image style="width: 30px; height: 30px" :src="require(`@/assets/images/icon/rankingBlue.png`)"
                      fit="fill"></el-image>
                  </div>
                  <div class="cwhite">负荷率排名</div>
                </div>
              </div>
              <div class="rankingBg flex-1 ml10 fcc cur"
                :class="{ rankingBg: activeIndex === 2, rankingBgBlue: activeIndex !== 2 }" @click="handleClick(2)"  @mouseover="hoverIndex = 2"
                @mouseout="hoverIndex = null">
                <div class="flex-1 fcc cur">
                  <div>
                    <el-image style="width: 30px; height: 30px" :src="require(`@/assets/images/icon/rankingBlue.png`)"
                      fit="fill"></el-image>
                  </div>
                  <div class="cwhite">发电效率排名</div>
                </div>
              </div>
            </div>
            <div class="fcbc w1 mt20">
              <div class="rankingBg flex-1 mr10 fcc cur"
                :class="{ rankingBg: activeIndex === 3, rankingBgBlue: activeIndex !== 3 }" @click="handleClick(3)"  @mouseover="hoverIndex = 3"
                @mouseout="hoverIndex = null">
                <div class="flex-1 fcc cur">
                  <div>
                    <el-image style="width: 30px; height: 30px" :src="require(`@/assets/images/icon/rankingBlue.png`)"
                      fit="fill"></el-image>
                  </div>
                  <div class="cwhite">电站等效同比排名</div>
                </div>
              </div>
              <div class="rankingBg flex-1 fcc cur"
                :class="{ rankingBg: activeIndex === 4, rankingBgBlue: activeIndex !== 4 }" @click="handleClick(4)"  @mouseover="hoverIndex = 4"
                @mouseout="hoverIndex = null">
                <div class="flex-1 fcc cur">
                  <div>
                    <el-image style="width: 30px; height: 30px" :src="require(`@/assets/images/icon/rankingBlue.png`)"
                      fit="fill"></el-image>
                  </div>
                  <div class="cwhite">计划完成率排名</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listFarm } from "@/api/system/farm"
import { totalInstalledCapList, generationOutputStatistics, totalPowerList,generationEquivalentHoursList,  devicesWarningData, powerGenerationTrendList,electricityProductionTrendList } from "@/api/dp/cockpit"
import barChart3d from "./chart/barChart-3d.vue";
import barChartThree from "./chart/barChart-three.vue";
import barChart from "./chart/barChart.vue";
import lineChart from "./chart/lineChartQs.vue";
import lineChartQs from "./chart/lineChart-qs.vue";
import lineChartRight from "./chart/lineChart-right.vue";
import pieChart from "./chart/pieChart.vue";
import continuousChart from "./chart/continuousChart.vue";
import fjTableAll from "./tableList-fj.vue";
import tableListRanking from "./tableList-ranking.vue";
import tableListRanking1 from "./tableList-ranking1.vue";
import tableListRanking2 from "./tableList-ranking2.vue";
import tableListRanking3 from "./tableList-ranking3.vue";
import tableListRanking4 from "./tableList-ranking4.vue";
import tableList from "./tableListJs1.vue";
import tableList2 from "./tableListJs2.vue";
import { queryDashboardData } from "@/api/dp/dianchangDetail";
import request from "@/utils/request";

export default {
  name: "cockpit",
  components: {  barChart, lineChart, fjTableAll, lineChartQs, lineChartRight, pieChart, continuousChart, barChart3d, barChartThree, tableListRanking, tableListRanking1, tableListRanking2, tableListRanking3, tableListRanking4, tableList,tableList2 },
  data() {
    return {
      // 总装机容量数据
      zjrlD: [],
      // 发电功率
      fdglX: [],
      // 发电功率
      fdglD: [],
      // 总功率
      zglD: [],
      // 总功率数值
      zglNum: [],
      // 发电量趋势
      fdlqsX: [],
      // 发电量趋势
      fdlqsD: [],
      // 发电总消失
      fdzxsX: [],
      // 发电总消失
      fdzxsD: [],
      // 发电总消失
      fdzxsD1: [],
      totalValue: 0, // 用于存储总和
      activeIndex: 0, // 当前选中的索引
      hoverIndex: null, // 当前悬停的索引
      // 设备告警检测
      sbgj: {
        gjxx: 0,
        yxz: 0,
        lx: 0,
        jx: 0,
        gz: 0,
      },
      // 发电量上面三个的数据
      electricityData: {
        dr: 0, // 当日
        dy: 0, // 当月
        dn: 0, // 当年
      },
      currentDate: "",
      currentTime: "",
      dialogVisible1: false,
      dialogVisible2: false,
      fjAll: false,
      dialogVisible: false,
      dialogVisibleA: false,
      dialogVisibleB: false,
      dialogVisibleC: false,
      dialogVisibleD: false,
      fenbuIdx: 1,
      gjzt: "",
      tabPosition: "nian",
      tabPosition1: "nian",
      chartKey: 0, // 用于强制重新渲染图表
      chartKey1: 0, // 用于强制重新渲染图表
      tabIdx: 2,
      tablist: [
        {
          name: "全景监视",
          path: "/operation",
        },
        {
          name: "监控大屏",
          path: "/monitoring",
        },
        {
          name: "驾驶舱总览",
          path: "/cockpit",
        },
        {
          name: "数据监测",
          path: "/detection",
        },
        {
          name: "智能分析",
          path: "/analysis",
        },
      ],
      leftThreeValue: "",
      leftThreeOptions: [
      ],
      // 风场集合
      farmList: [],
      turbineList: []
    };
  },
  methods: {
    // 总装机容量
    zzjrl() {
      totalInstalledCapList().then(response => {
        this.zjrlD = response.data
        // 计算所有value的总和
        this.totalValue = this.zjrlD.reduce((sum, item) => sum + Number(item.value), 0);

      })
    },
    // 总功率
    zgl() {
      totalPowerList().then(response => {
        this.zglD = response.data
        this.zglNum = response.zgl
      })
    },
    // 发电总效时
    fdzxs() {
      generationEquivalentHoursList().then(response => {
        this.fdzxsX = response.data.mc
        this.fdzxsD = response.data.dl
        this.fdzxsD1 = response.data.dxs
      })
    },
    // 发电功率趋势
    fdgl(type) {
      generationOutputStatistics(type).then(response => {
        console.log(response.data.y轴);

        this.fdglX = response.data.x轴
        this.fdglD = response.data.y轴
      })
    },
    // 设备告警监测
    sbgjjc(type) {
      devicesWarningData(type).then(response => {
        this.sbgj.gjxx = response.data.gjxx
        this.sbgj.gz = response.data.gz
        this.sbgj.jx = response.data.jx
        this.sbgj.lx = response.data.lx
        this.sbgj.yxz = response.data.yxz
      })
    },
    // 发电量数据
    fdlSj(type) {
      powerGenerationTrendList(type).then(response => {
        this.electricityData.dn=response.data[0].dn
        this.electricityData.dy=response.data[0].dy
        this.electricityData.dr=response.data[0].dr
      })
    },
    // 发电量下拉列表
    fdlXl() {
      listFarm().then(response => {
        this.leftThreeOptions = [
          {
            value: '',
            label: '全部'
          },
          ...response.rows.map(item => ({
            value: item.windFarmId,
            label: item.name
          }))
        ];
      })
    },
    // 发电量下拉点击事件
    handleSelectChange(value) {
      this.fdlSj(value)
    },
    // 发电量趋势
    fdlqs(type) {
      electricityProductionTrendList(type).then(response => {
        console.log(response.data.y轴);

        this.fdlqsX = response.data.x轴
        this.fdlqsD = response.data.y轴
      })
    },
    // 风场
    async farmData() {
      const _that = this;
      request({
        url: '/system/farm/getlistFarm',
        method: 'get',
      }).then(response => {
        _that.farmList = response.rows;
      });
    },
    // 风机
    async turbineData() {
      const _that = this;
      request({
        url: '/fjfd/turbine/listTurbine',
        method: 'get',
      }).then(response => {
        _that.turbineList = response.rows;
      });
    },
    //初始化设备检测统计数据
    dpsj() {
      queryDashboardData("234090001").then(response => {
        this.numData = response.data
        this.jzzt = response.data.unit_status
        this.fdtj = response.data.power_statistics
        this.hjcs = response.data.environment_params
        // 发电统计x
        this.fdtjx = response.data.power_chart_data.xaxis
        // 发电统计y
        this.fdtjy = response.data.power_chart_data.yaxis
      })
    },

    siteFun(i, t) {
      let numStr = 220;

      if (i % 2 == 0) {
        numStr = 170;
      }
      if (t == "t") {
        return i * 10 + numStr;
      }
      if (t == "l") {
        return i * 40 + 70;
      }
    },
    handleClick(index) {
      this.activeIndex = index;
      this.openTable(index);
    },
    // 折线图切换年月日

    handleTimeChange(val) {
      this.fdgl(val)
      this.tabPosition = val;
      // 通过改变key强制重新渲染图表组件
      this.chartKey += 1;
    },
    handleTimeChange1(val) {
      this.fdlqs(val)
      this.tabPosition1 = val;
      // 通过改变key强制重新渲染图表组件
      this.chartKey1 += 1;
    },
    // 年月日时分秒
    updateDateTime() {
      const now = new Date();

      // 格式化日期（YYYY-MM-DD 星期X）
      const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}-${month}-${day} ${weekday}`;

      // 格式化时间（HH:MM:SS）
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    openTable1(type) {
      console.log(type);
      if(type=='告警信息'){
        this.dialogVisible1 = true;
      }else{
        this.dialogVisible2 = true;
      }
      this.gjzt=type
    },
    // 点击全部风机出列表
    goToDetail1() {
      this.fjAll = true;
    },
    openTable(data) {
      if (data == 0) {
        this.dialogVisible = true;
      } else if (data == 1) {
        this.dialogVisibleA = true;
      } else if (data == 2) {
        this.dialogVisibleB = true;
      } else if (data == 3) {
        this.dialogVisibleC = true;
      } else if (data == 4) {
        this.dialogVisibleD = true;
      }
    },
    tabsFun(i) {
      this.tabIdx = i;
      this.$router.push(this.tablist[i].path);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "odd";
      }
      return "";
    },
    fenbu(i) {
      this.fenbuIdx = i;
    },
    goToDetail(row) {
      this.$router.push({path: "/dianchangDetail?windFarmId="+row.windFarmId});
    },

      // 增强版数据刷新方法
      async refreshData() {
      try {
        await Promise.all([
          this.farmData(),
          this.turbineData(),
          // 发电量下拉列表
          this.fdlXl(),
          // 发电等效时
          this.fdzxs(),
          // 发电量数据,
          this.fdlSj(""),
          // 总装机容量
          this.zzjrl(),
          // 发电功率趋势
          this.fdgl('nian'),
          // 发电量趋势
          this.fdlqs('nian'),
          // 总功率
          this.zgl(),
          // 设备告警监测
          this.sbgjjc(),
          // 初始更新
          this.updateDateTime()
        ]);
        console.log('数据刷新成功', new Date().toLocaleString());
      } catch (error) {
        console.error('数据刷新失败:', error);
      }
    },

    // 初始化定时器
    initRefreshTimer() {
      // 先清除旧定时器
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }

      // 设置定时器 (1分钟)
      this.refreshInterval = setInterval(() => {
        this.refreshData();
      }, 60000);
    }
  },
  mounted() {
    // 初始化定时刷新
    this.initRefreshTimer();


    this.farmData();
    this.turbineData();
    // 发电量下拉列表
    this.fdlXl()
    // 发电等效时
    this.fdzxs()
    // 发电量数据
    this.fdlSj("")
    // 总装机容量
    this.zzjrl()
    // 发电功率趋势
    this.fdgl('nian')
    // 发电量趋势
    this.fdlqs('nian')
    // 总功率
    this.zgl()
    // 设备告警监测
    this.sbgjjc()
    // 初始更新
    this.updateDateTime();

    // 每秒更新一次
    this.timer = setInterval(this.updateDateTime, 1000);
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/images/windPower/cockpitBg.png");
  background-size: 100% 100%;
  background-color: #000f21;
  position: relative;
}

.headerBox {
  background-image: url("~@/assets/images/windPower/titleMax.png");
  background-size: 100% 100%;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  width: 100%;
  position: relative;
  z-index: 99;
  overflow: hidden; /* 确保光束不会溢出 */
  /* 光束元素样式 */
.light-beam {
  position: absolute;
  top: 0;
  left: -80%; /* 初始位置在左侧外部 */
  width: 100px;
  height: 3px;
  background: linear-gradient(to left,
              #ffffff,
              rgba(255,255,255,0.8),
              rgba(255,255,255,0.5),
              rgba(255,255,255,0.2),
              transparent);

  transform: skewX(-20deg); /* 使光束倾斜 */
  animation: beam-scan 5s linear infinite;
  z-index: 1;
}

/* 光束动画 */
@keyframes beam-scan {
  0% {
    left: -50%;
    opacity: 0;
    top: 63px;
  }
  20% {
    opacity: 0.8;
    top: 63px;
  }
  40% {
    opacity: 0.8;
    top: 63px;
  }
  43% {
    opacity: 0;
    top: 63px;

  }
  46% {
    opacity: 0;
    top: 63px;

  }
  47% {
    opacity: 0.8;
    top: 15px;
  }
  80% {
    opacity: 0.8;
    top: 15px;
  }
  90% {
    opacity: 0.8;
    top: 15px;
  }
  100% {
    left: 100%;
    opacity: 0;
    top: 15px;
  }
}

/* 确保标题内容在光束之上 */
.headerBox > * {
  position: relative;
  z-index: 2;
}

  .tabsBox {
    width: 45%;

    .tabsItemBg {
      background-image: url("~@/assets/images/windPower/tabs.png");
      background-size: 100% 100%;
      height: 40px;
      color: #45a2ff;
      position: relative;

      .down_line {
        display: none;
        position: absolute;
        background-image: url("~@/assets/images/windPower/select-tabs.png");
        background-size: 100% 100%;
        width: 80%;
        height: 33px;
        top: 22px;
      }
    }

    .tabsItemBg:hover {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }

    .selectTabsItemBg {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }
  }
}

.cblue {
  color: #45a2ff;
}

.cwhite {
  color: #ffffff;
}

.cgray {
  color: #999999;
}

.chartBox {
  height: calc(100% - 84px);
  position: relative;
  z-index: 1;


  .chartTile {
    color: #ffffff;
    background-image: url("~@/assets/images/windPower/titleMin.png");
    background-size: 100% 100%;
    height: 30px;
    width: 100%;
    font-weight: bold;
    font-size: 14px;
    padding-left: 30px;
    position: relative;
    overflow: hidden; // 确保光束不会溢出

    .title-text {
      position: relative;
      z-index: 2; // 确保文字在光束之上
    }

    // 光束样式
    .light-beam {
      position: absolute;
      height: 100%;
      width: 300px;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 170, 255, 0.6) 30%,
        rgba(0, 170, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-20deg);
      z-index: 1;
      margin-top: -1.5px;
    }

    // 第一条光束
    .beam-1 {
      top: 0;
      left: -100%;
      animation: beam-sweep 4s ease-in-out infinite;
    }

    // 第二条光束
    .beam-2 {
      top: 0;
      left: -100%;
      animation: beam-sweep 4s ease-in-out infinite 2s;
    }

    // 光束动画
    @keyframes beam-sweep {
      0% {
        left: -100%;
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      70% {
        opacity: 0.8;
      }
      80% {
        left: 100%;
        opacity: 0.3;
      }
      90% {
        opacity: 0;
        left: 100%;
      }
      100% {
        left: 100%;
        opacity: 0;
      }
    }
  }


  .icon-electricity {
    color: #0aa7ff;
    // background-image: url("~@/assets/images/icon/icon-electricity.png");
    // background-size: 100% 100%;
    height: 50px;
    width: 50px;
  }

  .quan4{
  margin-left: -7px;
}
.quan8{
  position: absolute;
  top: 4px;
  bottom: 0;
  left: -4px;
  right: 0;
  margin: auto;
}
.wzz{
  position: absolute;
  bottom: -5px;
  left: 15px;
}
/* 旋转动画 */
.rotating-circle {
  animation: rotate 3s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
}

.leftThreeSelect {
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
}

.tabSelect {
  position: absolute;
  top: 0;
  right: 0;
}

.flex3 {
  flex: 0 0 33.33%;
}

.markPoint {
  width: 100%;
  height: 100%;
  position: relative;
}

.pointAll {
  position: absolute;
  width: 70px;
}

.pointAll:hover {
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);
}

.pointBox {
  background-image: url("~@/assets/images/icon/dc-blue.png");
  background-size: 100% 100%;
  width: 28px;
  height: 32px;
}

.pointBox1 {
  background-image: url("~@/assets/images/icon/dc-green.png");
  background-size: 100% 100%;
  width: 28px;
  height: 32px;
}

.pointBox2 {
  background-image: url("~@/assets/images/icon/dc-yellow.png");
  background-size: 100% 100%;
  width: 28px;
  height: 32px;
}

.jcpointBox {
  background-image: url("~@/assets/images/icon/fan.png");
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
}

.jcpointBox0 {
  background-image: url("~@/assets/images/icon/fan.png");
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
}

.jcpointBox1 {
  background-image: url("~@/assets/images/icon/fan.png");
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
}

.jcpointBox2 {
  background-image: url("~@/assets/images/icon/fan.png");
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
}

.cockpitCon {
  background-image: url("~@/assets/images/windPower/cockpitConBG.png");
  background-size: 100% 100%;
  min-width: 727px;
}

.cockpitConFjfb {
  background-image: url("~@/assets/images/windPower/cockpitConFjfbGB.png");
  background-size: 100% 100%;
  min-width: 727px;
}

.contentTitle {
  background-image: url("~@/assets/images/windPower/distribution.png");
  background-size: 100% 100%;
  height: 45px;

  .conTitleBtn {
    width: 280px;
    margin-bottom: 16px;
  }

  .distributionSel {
    background-image: url("~@/assets/images/windPower/distributionSel.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionSelLeft {
    background-image: url("~@/assets/images/windPower/distributionSelLeft.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionBlue {
    background-image: url("~@/assets/images/windPower/distributionBlue.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionRight {
    background-image: url("~@/assets/images/windPower/distributionRight.png");
    background-size: 100% 100%;
    height: 45px;
  }
}

.gjjcBox {
  .gjjcBg {
    background-image: url("~@/assets/images/icon/icon-rt-bg.png");
    background-size: 100% 100%;
    padding: 15px;
  }
}

.rel {
  position: relative;
}

.echartImg {
  background-image: url("~@/assets/images/icon/icon-ro.png");
}

.leftBox {
  width: 450px;
}

.concentBox {
  width: calc(100% - 980px);
}

.righBox {
  width: 450px;

  .icon-ro {
    color: #0aa7ff;
    background-image: url("~@/assets/images/icon/icon-ro.png");
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
  }

  .rsubtex {
    position: absolute;
    left: 30px;
    width: 50px;
  }

  .icon-rt-bg {
    background-image: url("~@/assets/images/icon/icon-rt-bg.png");
    background-size: 100% 100%;
    padding: 15px;
  }
}

.rankingBg {
  background-image: url("~@/assets/images/icon/rankingBg.png");
  background-size: 100% 100%;
  height: 80px;
}

.rankingBgBlue {
  background-image: url("~@/assets/images/icon/rankingBgBlue.png");
  background-size: 100% 100%;
  height: 80px;
}

// 风机32个位置
.fjWz0 {
  top: 190px;
  left: 55px;
}

.fjWz1 {
  top: 160px;
  left: 150px;
}

.fjWz2 {
  top: 160px;
  left: 90px;
}

.fjWz3 {
  top: 195px;
  left: 554px;
}

.fjWz4 {
  top: 365px;
  left: 260px;
}

.fjWz5 {
  top: 240px;
  left: 385px;
}

.fjWz6 {
  top: 260px;
  left: 120px;
}

.fjWz7 {
  top: 260px;
  left: 220px;
}

.fjWz8 {
  top: 230px;
  left: 320px;
}

.fjWz9 {
  top: 210px;
  left: 260px;
}

.fjWz10 {
  top: 190px;
  left: 220px;
}

.fjWz11 {
  top: 280px;
  left: 370px;
}

.fjWz12 {
  top: 220px;
  left: 390px;
}

.fjWz13 {
  top: 290px;
  left: 270px;
}

.fjWz14 {
  top: 330px;
  left: 280px;
}

.fjWz15 {
  top: 310px;
  left: 230px;
}

.fjWz16 {
  top: 160px;
  left: 260px;
}

.fjWz17 {
  top: 260px;
  left: 400px;
}

.fjWz18 {
  top: 60px;
  left: 540px;
}

.fjWz19 {
  top: 180px;
  left: 510px;
}

.fjWz20 {
  top: 80px;
  left: 580px;
}

.fjWz21 {
  top: 80px;
  left: 490px;
}

.fjWz22 {
  top: 120px;
  left: 480px;
}

.fjWz23 {
  top: 100px;
  left: 540px;
}

.fjWz24 {
  top: 145px;
  left: 520px;
}

.fjWz25 {
  top: 155px;
  left: 570px;
}

.fjWz26 {
  top: 200px;
  left: 440px;
}

.fjWz27 {
  top: 200px;
  left: 350px;
}

.fjWz28 {
  top: 200px;
  left: 300px;
}

.fjWz29 {
  top: 300px;
  left: 320px;
}

.fjWz30 {
  top: 250px;
  left: 270px;
}

.fjWz31 {
  top: 280px;
  left: 180px;
}

//radio
::v-deep .el-radio-button--medium .el-radio-button__inner {
  padding: 5px 15px;
  border-radius: 0px;
}

::v-deep .el-radio-button {
  margin-left: 10px;
}

::v-deep .el-radio-button__inner {
  background-color: #0aa7ff1a;
  color: #ffffff;
  border: none !important;
  box-shadow: none !important;
}

::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  border: none !important;
  box-shadow: none !important;
  border-top: 2px solid #0aa7ff !important;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
}

// select选择框
::v-deep .el-select-dropdown {
  background-color: rgba(1, 28, 82, 0.8);
  border: none;
}

::v-deep .el-input__inner {
  color: #0aa7ff;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
  padding-right: 10px;
  padding-left: 10px;
}

::v-deep .el-popper .popper__arrow {
  border-bottom-color: #0aa7ff;
}

::v-deep .el-popper .popper__arrow::after {
  border-bottom-color: #0aa7ff;
}

::v-deep .el-select .el-input .el-input__inner {
  border: none;
  border-radius: 0;
  border-top: 2px solid #0aa7ff;
}

::v-deep .el-select-dropdown__item {
  background-color: rgba(1, 28, 82, 0.8);
  color: #0aa7ff;
}

::v-deep .el-select-dropdown__item.selected {
  color: #ffffff;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  background-color: #0aa7ff66;
}

::v-deep .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-input--medium .el-input__icon {
  line-height: 30px;
}
</style>
